<!--
* description: 采购管理-订单类型运输方式关系维护
* author: zouzhu
* createdDate: 2021-01-25
-->
<template>
  <div class="app-container app-container-table" id="twoTable">
    <el-main class="leftMail MailOne">
      <one-table-template
        :ref="leftTable.tableRef"
        :key="leftTable.oneTableKey"
        :dynamicApiConfig="leftTable.apiConfig"
        :dynamicTableCols="leftTable.tableCols"
        :dynamicFormFields="leftTable.formField"
        :dynamicIsShowSelect="false"
        :dynamicIsInitTable="true"
        :callbackObj="leftTable.callbackObj"
        :dynamicParentTableRef="leftTable.tableRef"
        :dynamicPagerCount="5"
      />
    </el-main>
    <el-main class="rightElmain MailOne">
      <one-table-template
        :ref="rightTable.tableRef"
        :key="rightTable.oneTableKey"
        :dynamicButtons="rightTable.tableButtons"
        :dynamicApiConfig="rightTable.apiConfig"
        :dynamicTableCols="rightTable.tableCols"
        :dynamicFormFields="rightTable.formField"
        :dynamicUnFormFields="rightTable.unFormField"
        :dynamicIsShowSelect="false"
        :dynamicIsInitTable="false"
        :callbackObj="rightTable.callbackObj"
        :dynamicParentTableRef="rightTable.tableRef"
        :dynamicPagerCount="5"
      />
    </el-main>
     <!-- <edit
      :dynamicEditRowData="editRowData"
      :popupsVisible="editPopupsVisible"
      :key="editPopupsKey"
      :popupsState="editPopupsState"
      @close="close"
    /> -->
    <technicianEdit
      @sendCodeClose="sendCodeClose"
      :dataForForm="addRow"
      :popupsVisible="technicianEditVisible"
      :key="technicianEditKey"
    ></technicianEdit>
  </div>
</template>
<script>
import { moreTableWithViewTemplateMixins } from '@/components/mixins/moreTableWithViewTemplateMixins';
import api from '@/api/se/apiBaseData'
import { orgApis } from "@/api/paSparePartsManagement"
import OneTableTemplate from "@/components/templates/oneTable";
// import Edit from "./edit";
import Vue from "vue";
export default {
  name: "orderTransportMaintain",
  // 组件混入对象
  mixins: [moreTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      ["lookupMamagerLeft", "lookupMamagerRight"],
      function () {
        next();
      }
    );
  },
  components: {
    OneTableTemplate,
    // Edit,
    technicianEdit: () => import("./technicianEdit.vue")
  },
  data() {
    // 左网格pageCode
    const leftPageCode = "lookupMamagerLeft";
    // 右网格pageCode
    const rightPageCode = "lookupMamagerRight";
    // 绑定事件配置化事件
    // this.$ConfigCache.CacheConfig.bindEvent(this, [leftPageCode, rightPageCode])
    return {
      addRow:{},
      //班组弹窗
      editPopupsVisible:false,
      editPopupsState:'add',
      editPopupsKey:'editPopupsKey',
      // 技师弹窗
      technicianEditVisible:false,
      technicianEditKey: "technicianEditKey",
      editRowData:{},
      selectiondata:[],
      // 定义watch对象（用于组件联动监控）
      watchObj: [
        {
          formFieldName: "leftTable.formField",
          tableComponentsName: "leftTable.tableComponents",
          tableRef: "leftTableRef",
        },
        {
          formFieldName: "rightTable.formField",
          tableComponentsName: "rightTable.tableComponents",
          tableRef: "rightTableRef",
        },
      ],
      // 左网格
      leftTable: {
        // 网格Ref
        tableRef: "leftTableRef",
        // 网格Key
        oneTableKey: "leftTable",
        // 网格查询API配置对象
        apiConfig: orgApis.queryOrderType,

        // 动态生成网格列
        tableCols:
          this.$ConfigCache.CacheConfig.cacheData[leftPageCode] &&
          this.$ConfigCache.CacheConfig.cacheData[leftPageCode].tableCols
            .length > 0
            ? this.$ConfigCache.CacheConfig.cacheData[leftPageCode].tableCols
            : [
                {
                  prop: "orderTypeId",
                  label: "订单类型编码",
                  width: null,
                  align: "center",
                },
                {
                  prop: "orderTypeName",
                  label: "订单类型名称",
                  width: null,
                  align: "center",
                },
              ],
        // 表单查询数据
        formField: this.$utils.getFormField(
          this,
          {
            groupName: "",
            workGroupType: "",
          },
          this.$ConfigCache.CacheConfig.cacheData[leftPageCode]
        ),
        // 回调方法对象
        callbackObj: {
          // 网格点击回调事件
          onRowClick: (currentRow) => {
            this.onLeftRowClick(currentRow);
          },
        },
      },

      // 右网格
      rightTable: {
        // 网格Ref
        tableRef: "rightTableRef",
        // 网格Key
        oneTableKey: "rightTable",
        // 网格查询API配置对象
        apiConfig: orgApis.queryTransport,
        // 动态组件-按钮
        tableButtons: [
          {
            compKey: "btnKey2",
            disabled: true,
            type: "",
            size: "small",
            name: "add",
            clickEvent: ()=>this.techniciantion(),
            text: "运输方式", // 新增技师
            position: "left",
          },
        ],
        // 动态生成网格列
        tableCols:
          this.$ConfigCache.CacheConfig.cacheData[rightPageCode] &&
          this.$ConfigCache.CacheConfig.cacheData[rightPageCode].tableCols
            .length > 0
            ? this.$ConfigCache.CacheConfig.cacheData[rightPageCode].tableCols
            : [
              {
                  prop: "transportModeId",
                  label: "运输ID",
                  hidden: true,
                  alwaysHidden: true,
                },
                {
                  prop: "orderTypeId",
                  label: "订单ID",
                  hidden: true,
                  alwaysHidden: true,
                },
                {
                  prop: "controlBtn1",
                  label: "操作",
                  minWidth: 180,
                  isComponent: true,
                  comps: [
                    {
                      compKey: "propKey1",
                      labelName: "删除",
                      component: () => import("@/components/org/linkButton"),
                      clickEvent: (index) => this.deleteOrderTransport(index)
                    },
                  ],
                },
                {
                  prop: "transportModeCode",
                  label: "运输方式编码",
                  width: null,
                  align: "center",
                },
                {
                  prop: "transportModeName",
                  label: "运输方式名称",
                  width: null,
                  align: "center",
                },
                {
                  prop: "isLimitCn",
                  label: "是否运输限制",
                  width: null,
                  align: "center",
                },
              ],
        // 表单数据
        formField: this.$utils.getFormField(
          this,
          {
            empName: "",
            empCode: "",
          },
          this.$ConfigCache.CacheConfig.cacheData[rightPageCode]
        ),
        // 排除表单查询条件
        unFormField: {
          empName: "",
          empCode: "",
        },
        // 回调方法对象
        callbackObj: {
          // 删除工程师
          onCheckSelectChange: (selection) => {
          this.selectiondata=selection
          this.onCheckSelectChange1(selection);
        },
          // 网格点击回调事件
          onRowClick: (currentRow) => {
            this.onRightRowClick(currentRow);
          },
        },
      },
    };
  },
  mounted() {
     this.query(this.leftTable.tableRef)
  },
  methods: {
    // 左边网格行点击
    onLeftRowClick(currentRow) {
      // 复制对象 1(默认):创建、2:清空、3:不操作
      if (currentRow) {
        this.rightTable.tableButtons[0].disabled = false
        this.addRow=currentRow
        this.rightTable.formField.orderTypeId=currentRow.orderTypeId        
        // this.$utils.deepClone(this.rightTable.formField, repairGroupId, "1")
        // console.log(this.$utils.deepClone(this.rightTable.formField, repairGroupId, "1"))
        // debugger
          this.query(this.rightTable.tableRef, true)
      }
      this.resetRight();
    },
    // 右边网格行点击
    onRightRowClick(currentRow) {
      // 复制对象 1(默认):创建、2:清空、3:不操作
      this.$utils.deepClone(this.rightTable.formField, currentRow, "3");
    },
    // 重置右网格查询条件
    resetRight(tableRef) {
      // 复制对象 1(默认):创建、2:清空、3:不操作
      this.$utils.deepClone(
        this.rightTable.formField,
        this.rightTable.unFormField,
        "3"
      );
    },
    //技工多选
    onCheckSelectChange1(selection) {
      const isCheck = selection && selection.length > 0;
      this.rightTable.tableButtons[2].disabled = !isCheck;
    },
     // 修改班组获取数据
    edit(index) {
      this.editPopupsState = 'edit'
      this.editPopupsVisible = true
      this.editRowData = this.$utils.deepCopy(this.$refs[this.leftTable.tableRef].list[index])
    },
     // 停用班组获取数据
     delet(index){
       this.editRowData = this.$utils.deepCopy(this.$refs[this.leftTable.tableRef].list[index])
       const that = this;
      const queryObj = {
        // 保存mutation
        type: "mutation",
        // api配置
        apiConfig: api.deleteTeam,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: this.editRowData,
      };
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj);
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then((response) => {
        if (response.result === "1") {
          this.$message({
            message: response.msg /* 保存成功*/,
            type: "success",
            duration: 1000,
          });
           this.query(this.leftTable.tableRef)
        } else {
          // 保存失败
          this.$message({
            message:response.msg,
            type: "warn",
            uration: 1000,
          });
        }
      });
    }, 
     // 删除运输方式
     deleteOrderTransport(index){
      this.editRowData = this.$utils.deepCopy(this.$refs[this.rightTable.tableRef].list[index])
      const that = this;
      const queryObj = {
        // 保存mutation
        type: "mutation",
        // api配置
        apiConfig: orgApis.deleteOrderTransport,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables:  this.editRowData,
      };
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj);
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then((response) => {
        if (response.result === "1") {
          this.$message({
            message: response.msg /* 保存成功*/,
            type: "success",
            duration: 1000,
          });
           this.query(this.rightTable.tableRef)
        } else {
          // 保存失败
          this.$message({
            message:response.msg,
            type: "warn",
            uration: 1000,
          });
        }
      });
    }, 
    addTeam(){
      this.editPopupsState = 'add'
      this.editPopupsVisible = true
       this.editRowData={}
    },
      // 技师弹窗
    techniciantion(){
      this.technicianEditVisible = true;
      this.technicianEditKey += "1";
    },
    // 技师弹窗关闭
     sendCodeClose() {
      this.technicianEditVisible = false;
      this.technicianEditKey += "1";
      this.rightTable.formField.repairGroupId=this.addRow.repairGroupId
      this.query( this.rightTable.tableRef)
    },
    close(type){
        this.editPopupsVisible=type
        this.query(this.leftTable.tableRef)
    },
    // 保存
    // save(tableRef) {
    //   let that = this;
    //   if (that.$refs.rightTableRef.currentRow === null || undefined) {
    //     that.rightTable.formField.column1 = "";
    //   } else {
    //     that.rightTable.formField.column1 =
    //       that.$refs.rightTableRef.currentRow.lookupValueCode;
    //   }

    //   if (that.rightTable.formField.isEnable === "" || undefined) {
    //     that.$message({
    //       message: "是否启用不能为空",
    //       type: "warning",
    //       duration: 2000,
    //     });
    //     return;
    //   }
    //   // validpopups 组件弹窗  validpage 表单查询
    //   that.$utils.validataMoth(that, "validpage", null, tableRef);
    //   // if (that.valid) {
    //   let queryObj = {
    //     // 保存mutation
    //     type: "mutation",
    //     // api配置
    //     apiConfig: orgApis.deleteTeam,
    //     //条件/实体参数（变量），根据typeParam中的定义配置
    //     variables: {
    //       //当前中台使用的名称有dataInfo、info，具体查看API文档
    //       dataInfo: that.rightTable.formField,
    //     },
    //   };
    //   //转换了中台请求格式数据
    //   var paramD = that.$getParams(queryObj);
    //   // 调用中台API方法（可复用）
    //   that.$requestAPI(paramD).then((response) => {
    //     if (response.result === "0") {
    //       return;
    //     }
    //     var getResult = response;
    //     if (getResult.result === "1") {
    //       that.$message({
    //         message: getResult.msg,
    //         type: "success",
    //         duration: 2000,
    //       });
    //       // 重置表单
    //       that.resetRight(tableRef);
    //       // 重新加载
    //       that.onLeftRowClick(null);
    //     } else {
    //       that.$message({
    //         message: getResult.msg,
    //         type: "warning",
    //         duration: 2000,
    //       });
    //     }
    //   });
    //   // }
    // },
    // 获取值
    // getCompValue(val, index, row) {
    //   console.info(val);
    //   console.info(index);
    //   console.info(row);
    // },
  },
};
</script>
